<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix header-box">
      <span>文章分类</span>
      <el-button type="primary" @click="addClassificationFn" size="small">添加分类</el-button>
    </div>
    <!-- 表格内容区域 -->
    <div>
      <el-table border :data="articleList" stripe style="width: 100%" >
      <el-table-column label="序号" type="index" width="60px"></el-table-column>
      <el-table-column label="分类名称" prop="cate_name"></el-table-column>
      <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
      <el-table-column label="操作" width="173px">
        <template slot-scope="scope">
         <el-button type="primary" @click="updateArticleFn(scope.row)" size="small">修改</el-button>
        <el-button type="danger" @click="deleteArticleFn(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- dialog对话框 -->
      <el-dialog
        :title="isEdit ? '编辑文章分类' : '添加文章分类'"
        :visible.sync="dialogVisible"
        width="35%"
        @closed="closedFn"
        >
        <el-form :model="addArticleForm" :rules="addArticleFormRules" label-width="80px" ref="addArticleRef">
          <el-form-item label="分类名称" prop="cate_name">
            <el-input v-model="addArticleForm.cate_name"></el-input>
          </el-form-item>
          <el-form-item label="分类别名" prop="cate_alias">
            <el-input v-model="addArticleForm.cate_alias"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
  </el-card>
</template>

<script>
import { getArticleClassificationAPI, addArticleClassification, updateArticleClassificationAPI, getArticleClassificationParticularsAPI, deleteArticleClassificationAPI } from '@/api'
export default {
  name: 'articleClassification',
  data () {
    return {
      articleList: [], // 文章列表
      addArticleForm: {
        cate_name: '',
        cate_alias: ''
      },
      // 表单验证规则
      addArticleFormRules: {
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
        ]
      },
      dialogVisible: false, // 控制dialog对话框是否打开
      editId: '', // 每个文章分类对应的id
      isEdit: false // false为新增状态，true为编辑状态
    }
  },
  created () {
    // 获取文章列表
    this.getArticleList()
  },
  methods: {
    // 获取文章列表
    async getArticleList () {
      const { data: res } = await getArticleClassificationAPI()
      if (res.code !== 0) return false
      this.articleList = res.data
    },
    // 添加分类
    addClassificationFn () {
      this.isEdit = false
      this.dialogVisible = true
    },
    // 添加分类里的取消按钮
    cancel () {
      this.dialogVisible = false
    },
    // 添加分类里的确定按钮
    confirm () {
      this.$refs.addArticleRef.validate(async valid => {
        if (!valid) return false
        if (!this.isEdit) {
          const { data: res } = await addArticleClassification(this.addArticleForm)
          console.log(res)
          if (res.code !== 0) return this.$message.error('添加文章分类失败！')
          this.$message.success('添加文章分类成功!')
        } else {
          // 获取文章分类详情
          const { data: infoRes } = await getArticleClassificationParticularsAPI(this.editId)
          const { data: res } = await updateArticleClassificationAPI({ id: this.editId, ...this.addArticleForm })
          if (res.code !== 0) return this.$message.error('修改文章分类失败！')
          if (infoRes.data.cate_name === this.addArticleForm.cate_name && infoRes.data.cate_alias === this.addArticleForm.cate_alias) {
            this.$message.error('修改的分类名称或分类别名不能和之前一致！！！')
          } else {
            this.$message.success('修改文章分类成功!')
          }
        }

        // 重新获取文章列表
        this.getArticleList()
        this.dialogVisible = false
      })
    },
    // 关闭dialog对话框时的回调
    closedFn () {
      this.$refs.addArticleRef.resetFields()
    },
    // 修改文章分类
    updateArticleFn (obj) {
      this.editId = obj.id
      this.isEdit = true
      this.dialogVisible = true
      // 数据回显
      this.$nextTick(() => {
        this.addArticleForm.cate_name = obj.cate_name
        this.addArticleForm.cate_alias = obj.cate_alias
      })
    },
    // 删除文章分类
    async deleteArticleFn (id) {
      const { data: res } = await deleteArticleClassificationAPI(id)
      console.log(res)
      if (res.code !== 0) this.$message.error('删除文章分类失败！')
      this.$message.success('删除文章分类成功！！！')
      // 重新获取文章列表
      this.getArticleList()
    }
  }
}
</script>

<style lang='less' scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-table {
  .el-button {
    padding: 10px 20px;
  }
}
</style>
